<template>
  <div id="add">
    <Header goback="true" headerTitle="新增地址"></Header>
    <div class="add-content">
      <div class="add-details">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          class="add-from-details"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入你的姓名"
            class="item-detail-all"
          ></el-input>
          <el-input
            v-model="form.address"
            placeholder="小区/写字楼/学校等"
            class="item-detail-all"
            @focus="toCity"
          ></el-input>
          <el-input
            v-model="form.detailsAddress"
            placeholder="请填写详情送餐地址"
            class="item-detail-all"
          ></el-input>
          <el-input
            v-model="form.tel"
            placeholder="请填写能够联系到您的手机号"
            class="item-detail-all"
          ></el-input>
          <el-input
            v-model="form.notetel"
            placeholder="备用联系电话(选填)"
            class="item-detail-all"
          ></el-input>
        </el-form>
        <div class="add-sub">
          <el-button :class="subBtn">新增地址</el-button>
        </div>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Header from "../../../../../components/header/header";
export default {
  data() {
    return {
      subBtn: { "nocheck-sub-btn": false, "sub-btn": true },

      form: {
        name: "",
      },
    };
  },
  components: {
    Header,
  },
  methods: {
    toCity() {
      this.$router.push("/user/info/address/add/tocity");
    },
  },
};
</script>

<style lang="scss" scoped>
//引入公告模块
@import "../../../../../style/mixin";
//头部
#add {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 240;
  @include wh(100%, 100%);
  background: #f2f2f2;
}
//内容主体
.add-content {
  padding-top: 1.95rem;
}
.add-from-details {
  background: white;
  margin-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.add-sub {
  padding: 0.6rem 0.5rem;
}
</style>
<style lang="scss">
.item-detail-all {
  padding: 0.4rem 0.5rem 0 0.5rem;
  .el-input__inner {
    background: #f2f2f2;
    height: 1.5rem;
    line-height: 1.5rem;
  }
  .el-input__inner:focus {
    // outline: none;
    border: 0.05rem solid #dcdfe6;
  }
  .el-input__inner::placeholder {
    font-size: 0.55rem;
    color: #666666;
  }
  .el-input__inner::-webkit-input-placeholder {
    font-size: 0.55rem;
    color: #666666;
  }
  .el-input__inner::-moz-placeholder {
    font-size: 0.55rem;
    color: #666666;
  }
  .el-input__inner::-ms-input-placeholder {
    font-size: 0.55rem;
    color: #666666;
  }
}
.sub-btn {
  width: 100%;
  height: 1.8rem;
  background: #4cd964;
  span {
    color: white;
  }
}
.nocheck-sub-btn {
  span {
    opacity: 0.4;
  }
}
</style>